.container {
    position: relative;
    min-width: 1500px;
    height: 100vh;
    // min-height: 1080px;
    background-color: #241a1d;
    background-image: url('~@/resource/auctionManage/game_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        display: block;
        width: 100%;
        height: 7.22%;
        background-image: url('~@/resource/auctionManage/bg1_top.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        content: '';
    }

    .top_hang_warpper {
        height: 100%;
        overflow-y: hidden;
    }

    .top_hang {
        position: absolute;
        top: 5.74%;
        left: calc(50% - 1.8rem);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 3.6rem;
        height: 1.49rem;
        padding: 0.56rem 0 0.17rem;
        background-image: url('~@/resource/auctionManage/hang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .animated_wrapper {
            padding: 0 0.35rem 0;
            transform: translateY(-76px);

            & > div {
                // opacity: 0 !important;
            }

            & > div:nth-child(2) {
                z-index: 10 !important;
                // opacity: 1 !important;
            }
        }

        & > div {
            width: 100%;
        }

        .hang_wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 8px 0;
            background-color: #242421;
        }

        .avatar_warpper {
            position: relative;

            &::before {
                position: absolute;
                right: 0.17rem;
                bottom: 0.21rem;
                z-index: 5;
                display: block;
                width: 0.6rem;
                height: 0.6rem;
                background-image: url('~@/resource/auctionManage/winner.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                content: '';
            }

            img {
                width: 0.56rem;
                height: 0.56rem;
                border-radius: 0.56rem;
            }
        }

        .info {
            display: flex;
            flex: 1;
            flex-direction: column;
            min-width: 1px;
            margin: 0.03rem 0.12rem;
            color: #fff;
            font-weight: 500;
            font-size: 0.2rem;
            font-family: PingFangSC-Medium, PingFang SC;
            line-height: 0.28rem;

            span {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .tips {
                margin-top: 0.02rem;
                color: #fff;
                font-weight: 400;
                font-size: 0.14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                line-height: 0.2rem;
                opacity: 0.65;
            }
        }

        .price {
            color: #fff;
            font-weight: 500;
            font-size: 0.36rem;
            font-family: PingFangSC-Medium, PingFang SC;
            line-height: 0.5rem;
            text-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
        }
    }

    .stage_container {
        position: absolute;
        top: 0.62rem;
        bottom: 40.83%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        min-width: 14.9rem;

        .scoreboard {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            width: 3.6rem;
            height: 5rem;
            padding: 0.27rem 0.24rem;
            background-image: url('~@/resource/auctionManage/zuojiazi.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;

            .scoreboard_wrapper {
                padding: 0.18rem 0.2rem;
            }

            .animation_wrapper {
                height: 3rem;
                overflow: hidden;
            }

            .average {
                margin-bottom: 0.08rem;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 400;
                font-size: 0.16rem;
                font-family: PingFangSC-Regular, PingFang SC;
                line-height: 0.22rem;
            }

            .price_block {
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                height: 0.48rem;
                margin-bottom: 0.12rem;
                padding: 0.12rem 0.18rem;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 400;
                font-size: 0.18rem;
                font-family: PingFangSC-Regular, PingFang SC;
                line-height: 0.25rem;
                background: #e7e4d5;
                box-shadow: inset 0 0.03rem 0 0 #afa492;

                img {
                    width: 0.24rem;
                    height: 0.24rem;
                }

                .no {
                    width: 27px;
                    height: 23px;
                    color: #8d7661;
                    font-size: 18px;
                    font-family: YouSheBiaoTiHei;
                    line-height: 23px;
                }

                span {
                    color: #b24f00;
                }

                .name {
                    flex: 1;
                    margin: 0 0.12rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }

        .auctioneer {
            width: 2.6rem;
            height: 3.14rem;
            margin: 0 1.34rem 0 1.52rem;
            background-image: url('~@/resource/auctionManage/auctioneer.png');
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 100% 100%;
            background-size: 100%;
        }

        .auctioneer_success {
            width: 3.25rem;
            height: 3.94rem;
            margin: 0 0.56rem 0.01rem 1.65rem;
            background-image: url('~@/resource/auctionManage/auctioneer_success.png');
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 100% 100%;
            background-size: 100%;
        }

        .explain_board {
            position: relative;
            width: 5.84rem;
            height: 100%;
            background-image: url('~@/resource/auctionManage/youjiazi.png');
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 100% 100%;

            .title {
                position: absolute;
                top: 52.01%;
                left: calc(50% - 2.21rem);
                width: 4.42rem;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 500;
                font-size: 0.26rem;
                font-family: PingFangSC-Medium, PingFang SC;
                line-height: 0.37rem;
                text-align: center;
            }

            .content {
                position: absolute;
                top: 60.58%;
                left: calc(50% - 2.21rem);
                width: 4.42rem;
                color: rgba(0, 0, 0, 0.65);
                font-weight: 400;
                font-size: 0.18rem;
                font-family: PingFangSC-Regular, PingFang SC;
                line-height: 0.28rem;
                text-align: center;
            }

            .action_btn {
                position: absolute;
                top: 76.44%;
                left: calc(50% - 0.66rem);
                width: 1.32rem;
                height: 0.45rem;
                cursor: pointer;
            }
        }
    }
}
